import React, { Component, Fragment } from 'react';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Tabs,
  Row,
  Col,
  Input,
  Button,
  Radio,
  DatePicker,
  Divider,
  Select,
  message,
} from 'antd';
import queryString from 'query-string';
import { connect } from 'dva';
import Link from 'umi/link';
import moment from 'moment';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import styles from '@/utils/utils.less';
import DictCode from '../../components/DictCode';
import Customer from '../../components/Customer';
import Supplier from '../../components/NsSupplier';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const { Option } = Select;
@connect(({ remitclaim, loading, login, publicdata }) => ({
  remitclaim,
  login,
  publicdata,
  activeKey: remitclaim.activeKey,
  loading: loading.effects['remitclaim/fetchServiceType'] ? false : loading.models.remitclaim,
}))
@Form.create()
class RemitClaimList extends Component {
  state = {
    selectedRows: [],
    selectedRowKeys: [],
    btnList: [
      { id: 1, name: '认领客户到款', authority: 'business:claim:cust' },
      { id: 2, name: '认领供应商到款', authority: 'business:claim:supp' },
      { id: 3, name: '认领员工到款', authority: 'business:claim:emp' },
      { id: 4, name: '认领', authority: 'business:claim:refund' },
      { id: 5, name: '认领接单方返款', authority: 'business:claim:recvRefund' },
      { id: 6, name: '认领签约方费用', authority: 'business:claim:sendSupp' },
    ],
  };

  tableSearchLayout = {
    labelCol: { md: { span: 7 } },
    wrapperCol: { md: { span: 17 } },
  };

  tableSearchLayout1 = {
    labelCol: { md: { span: 4 } },
    wrapperCol: { md: { span: 17 } },
  };

  componentDidMount() {
    const { dispatch, location, login, activeKey } = this.props;
    const { systemList } = login;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    let userType;
    systemList.forEach(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: {
        activeKey: tempActiveKey,
        userType,
      },
    });
    if (String(userType) === '4') {
      dispatch({
        type: 'remitclaim/fetchServiceType',
        payload: {
          serType: 1,
        },
      });
    }
    dispatch({
      type: 'remitclaim/fetchSupplyList',
      payload: {},
    });
    this.initialData(userType, isMenuLink, tempActiveKey, location);
  }

  initialData = async (userType, isMenuLink, activeKey, location) => {
    const {
      dispatch,
      remitclaim: {
        pageData: { pagination },
      },
    } = this.props;
    await dispatch({
      type: 'remitclaim/initialPageListData',
      payload: userType,
    });
    const {
      remitclaim: {
        remitClaimPageData: { pageList },
      },
    } = this.props;
    if (isMenuLink) {
      await this.resetAndGeLlist(
        location,
        pageList.typeDataSoure && pageList.typeDataSoure[0].itemCode
      );
    } else {
      await this.getList(
        activeKey,
        pagination.current,
        pagination.pageSize,
        undefined,
        undefined,
        pageList.typeDataSoure && pageList.typeDataSoure[0].itemCode
      );
    }
  };

  getList = (
    activeKey = '1',
    currentPage = 1,
    pageSize = 10,
    queryParam,
    isClear = true,
    claimTypeVaule
  ) => {
    if (isClear) {
      this.setState({
        selectedRowKeys: [],
        selectedRows: [],
      });
    }
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      const value = fieldsValue;
      if (+activeKey === 2) {
        value.clmType = claimTypeVaule;
      }
      if (err) return;
      dispatch({
        type: 'remitclaim/updateModelData',
        payload: { formFieldsValue: value, activeKey },
      });
      const tempVal = {};
      Object.keys(value).forEach(key => {
        if (String(key) === 'dateArr') {
          tempVal.creStartDate = value.dateArr && value.dateArr[0].format('YYYY-MM-DD');
          tempVal.creEndDate = value.dateArr && value.dateArr[1].format('YYYY-MM-DD');
        } else if (
          String(key) === 'beClmIdCust' ||
          String(key) === 'beClmIdSupp' ||
          String(key) === 'beClmIdName' ||
          String(key) === 'beClmIdNs'
        ) {
          tempVal.beClmId = value[key] && value[key].trim();
        } else {
          tempVal[key] = value[key] === undefined ? null : value[key].trim();
        }
      });
      delete tempVal.beClmIdCust;
      delete tempVal.beClmIdSupp;
      delete tempVal.beClmIdName;
      delete tempVal.beClmIdNs;
      delete tempVal.dateArr;
      const pageArg = { currentPage, pageSize };
      const values = {
        ...tempVal,
        pageArg,
      };
      if (String(activeKey) === '1') {
        dispatch({
          type: 'remitclaim/fetchRemitPageList',
          payload: values,
        });
      } else {
        dispatch({
          type: 'remitclaim/fetchClaimPageList',
          payload: values,
        });
      }
    });
  };

  onClaimType = e => {
    const {
      dispatch,
      activeKey,
      remitclaim: { userType },
    } = this.props;
    const claimTypeVaule = e.target.value;
    if (String(userType) === '4') {
      dispatch({
        type: 'remitclaim/fetchServiceType',
        payload: { serType: claimTypeVaule === '4' ? 1 : 2 },
      });
    }
    this.getList(activeKey, undefined, undefined, undefined, undefined, claimTypeVaule);
  };

  jumpPage = id => {
    const { selectedRows, selectedRowKeys } = this.state;
    // 客户-1 供应商-2 员工-3
    if (selectedRows.length) {
      let isJumpOne = false;
      let isJumpTwo = false;
      const arr = [];
      for (let i = 0; i < selectedRows.length; i += 1) {
        if (Number(selectedRows[i].claimStatus) === 3) {
          isJumpOne = true;
        }
        if (Number(selectedRows[i].claimStatus) === 2 && Number(selectedRows[i].clmType) !== id) {
          isJumpTwo = true;
        }
        arr.push(selectedRows[i].clmTypeName);
      }
      if (isJumpOne) {
        return message.warning(`所选数据存在已认领的汇款单，不可重复认领`);
      }
      if (isJumpTwo) {
        return message.warning(`汇款单已作为${[...new Set(arr)]}认领，不能更改认领类型。`);
      }
      window.sessionStorage.setItem('remitClaimselectedRowKeys', selectedRowKeys);
      router.push(`/fmmanage/remitclaim/claimPage?claimTypeId=${id}`);
    } else {
      message.warning('至少选择一条数据');
    }
    return true;
  };

  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey, formFieldsValue } = this.props;
    this.getList(
      activeKey,
      pagination.current,
      pagination.pageSize,
      undefined,
      false,
      Number(activeKey) === 1 ? undefined : formFieldsValue.clmType
    );
  };

  changeTabPane = async activeKey => {
    const {
      location,
      dispatch,
      remitclaim: {
        remitClaimPageData: { pageList },
      },
    } = this.props;
    router.push({
      pathname: location.pathname,
      query: {
        activeKey,
      },
    });
    await dispatch({
      type: 'remitclaim/updateModelData',
      payload: { activeKey },
    });
    await this.getList(
      activeKey,
      undefined,
      undefined,
      undefined,
      undefined,
      pageList.typeDataSoure && pageList.typeDataSoure[0].itemCode
    );
  };

  // 切换表格展开收起
  remitToggleForm = () => {
    const {
      dispatch,
      remitclaim: { remitExpandForm },
    } = this.props;
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: { remitExpandForm: !remitExpandForm },
    });
  };

  claimToggleForm = () => {
    const {
      dispatch,
      remitclaim: { claimExpandForm },
    } = this.props;
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: { claimExpandForm: !claimExpandForm },
    });
  };

  resetSearch = () => {
    const {
      form,
      dispatch,
      remitclaim: {
        formFieldsValue,
        remitClaimPageData: { pageList },
      },
    } = this.props;
    form.resetFields();
    form.setFieldsValue({
      dateArr: null,
    });
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: {
        formFieldsValue: {
          clmType:
            formFieldsValue.clmType ||
            (pageList.typeDataSoure && pageList.typeDataSoure[0].itemCode),
        },
      },
    });
  };

  // 认领类型表单
  queryDom = (pageList, getFieldDecorator, formFieldsValue, searchListDataSource) =>
    pageList.searchList &&
    pageList.searchList.map(item => {
      let content;
      switch (item.type) {
        case 'input':
          content = <Input placeholder="请输入" />;
          break;
        case 'searchCs':
          content = <Customer allowClear />;
          break;
        case 'searchOs':
          content = <Customer attr allowClear />;
          break;
        case 'NsSupplier':
          content = <Supplier allowClear />;
          break;
        case 'select':
          content = (
            <Select
              allowClear
              showSearch
              filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
              style={{ width: '100%' }}
              placeholder="请选择"
            >
              {searchListDataSource[item.dataSource] &&
                searchListDataSource[item.dataSource].map(it => (
                  <Option key={it[item.id]}>{it[item.name]}</Option>
                ))}
            </Select>
          );
          break;
        case 'date':
          content = <RangePicker style={{ width: '100%' }} />;
          break;
        default:
          break;
      }
      if (Number(item.isShow) === Number(formFieldsValue.clmType) || !item.isShow) {
        return (
          <Col md={8} sm={24} key={item.prop}>
            <FormItem label={item.label} {...this.tableSearchLayout}>
              {getFieldDecorator(`${item.prop}`, {
                initialValue: formFieldsValue[item.prop],
              })(content)}
            </FormItem>
          </Col>
        );
      }
      return null;
    });

  // 重置查询条件并获取列表
  async resetAndGeLlist(location, claimTypeVaule) {
    const { dispatch } = this.props;
    await this.resetSearch();
    await this.getList(
      location.query.activeKey,
      undefined,
      undefined,
      undefined,
      undefined,
      claimTypeVaule
    );
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: { remitExpandForm: false, claimExpandForm: false },
    });
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  // 汇款信息查询条件
  remitRenderSimpleForm() {
    const {
      form: { getFieldDecorator },
      activeKey,
      remitclaim: { formFieldsValue },
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="汇款单编号" {...this.tableSearchLayout}>
              {getFieldDecorator('remiCode', {
                initialValue: formFieldsValue.remiCode,
              })(<Input placeholder="请输入" maxLength={15} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="汇款人姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('payName', {
                initialValue: formFieldsValue.payName,
              })(<Input placeholder="请输入" maxLength={18} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" onClick={() => this.getList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={() => this.resetSearch()}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.remitToggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  remitRenderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      remitclaim: { formFieldsValue },
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="汇款单编号" {...this.tableSearchLayout}>
              {getFieldDecorator('remiCode', {
                initialValue: formFieldsValue.remiCode,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="汇款人姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('payName', {
                initialValue: formFieldsValue.payName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="银行日期" {...this.tableSearchLayout}>
              {getFieldDecorator('dateArr', {
                initialValue: formFieldsValue.dateArr,
              })(
                <RangePicker
                  format="YYYY-MM-DD"
                  placeholder={['开始时间', '结束时间']}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="认领状态" {...this.tableSearchLayout}>
              {getFieldDecorator('claimStatus', {
                initialValue: formFieldsValue.claimStatus,
              })(
                <DictCode
                  dictType="CLAIM_STATUS"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24} />
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <span style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" htmlType="submit" onClick={() => this.getList(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.remitToggleForm}>
                  收起 <UpOutlined />
                </a>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  // 认领记录查询条件
  claimRenderSimpleForm() {
    const {
      form: { getFieldDecorator },
      remitclaim: {
        formFieldsValue,
        remitClaimPageData: { pageList },
        searchListDataSource,
        userType,
      },
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        {Number(userType === 3) ? null : (
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col xl={14}>
              <FormItem label="认领类型" {...this.tableSearchLayout1}>
                {getFieldDecorator('clmType', {
                  initialValue:
                    formFieldsValue.clmType ||
                    (pageList.typeDataSoure && pageList.typeDataSoure[0].itemCode),
                })(
                  <Radio.Group onChange={this.onClaimType} style={{ marginTop: 5 }}>
                    {pageList.typeDataSoure &&
                      pageList.typeDataSoure.map(item => (
                        <Radio value={item.itemCode} key={item.itemCode}>
                          {item.itemName}
                        </Radio>
                      ))}
                  </Radio.Group>
                )}
              </FormItem>
            </Col>
          </Row>
        )}
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {this.queryDom(pageList, getFieldDecorator, formFieldsValue, searchListDataSource)}
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={() =>
                  this.getList(
                    activeKey,
                    undefined,
                    undefined,
                    undefined,
                    undefined,
                    formFieldsValue.clmType
                  )
                }
              >
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={() => this.resetSearch()}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.claimToggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  claimRenderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      remitclaim: {
        formFieldsValue,
        remitClaimPageData: { pageList },
        searchListDataSource,
        userType,
      },
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        {Number(userType === 3) ? null : (
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col xl={14}>
              <FormItem label="认领类型" {...this.tableSearchLayout1}>
                {getFieldDecorator('clmType', {
                  initialValue: formFieldsValue.clmType || pageList.typeDataSoure[0].itemCode,
                })(
                  <Radio.Group onChange={this.onClaimType}>
                    {pageList.typeDataSoure &&
                      pageList.typeDataSoure.map(item => (
                        <Radio value={item.itemCode} key={item.itemCode}>
                          {item.itemName}
                        </Radio>
                      ))}
                  </Radio.Group>
                )}
              </FormItem>
            </Col>
          </Row>
        )}
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {this.queryDom(pageList, getFieldDecorator, formFieldsValue, searchListDataSource)}
          <Col md={8} sm={24}>
            <FormItem label="结算状态" {...this.tableSearchLayout}>
              {getFieldDecorator('settState', {
                initialValue: formFieldsValue.settState,
              })(
                <DictCode
                  dictType="CLM_SETT_STATE"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {userType === 4 && (
            <Col md={8} sm={24}>
              <FormItem label="认领时间" {...this.tableSearchLayout}>
                {getFieldDecorator('dateArr', {
                  initialValue: formFieldsValue.settState,
                })(
                  <RangePicker
                    format="YYYY-MM-DD"
                    placeholder={['开始时间', '结束时间']}
                    style={{ width: '100%' }}
                  />
                )}
              </FormItem>
            </Col>
          )}
          <Col>
            <div style={{ float: 'right', marginBottom: 24 }}>
              <span>
                <Button
                  type="primary"
                  htmlType="submit"
                  onClick={() =>
                    this.getList(
                      activeKey,
                      undefined,
                      undefined,
                      undefined,
                      undefined,
                      formFieldsValue.clmType
                    )
                  }
                >
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={() => this.resetSearch()}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.claimToggleForm}>
                  展开 <UpOutlined />
                </a>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm(activeKey) {
    const {
      remitclaim: { remitExpandForm, claimExpandForm },
    } = this.props;
    if (activeKey === 1) {
      return remitExpandForm ? this.remitRenderAdvancedForm() : this.remitRenderSimpleForm();
    }
    return claimExpandForm ? this.claimRenderAdvancedForm() : this.claimRenderSimpleForm();
  }

  render() {
    const {
      remitclaim: {
        pageData,
        formFieldsValue: { clmType },
        remitClaimPageData: { pageList },
        userType,
      },
      activeKey,
      loading,
    } = this.props;
    const { selectedRows, selectedRowKeys, btnList } = this.state;
    const remitColumns = [
      {
        title: '汇款单编号',
        dataIndex: 'remiCode',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '汇款人姓名',
        dataIndex: 'payName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '汇款金额(元)',
        dataIndex: 'remiAmo',
        onCell: () => ({
          style: {
            textAlign: 'right',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'right',
          },
        }),
      },
      {
        title: '可认领金额(元)',
        dataIndex: 'nonRemiAmount',
        onCell: () => ({
          style: {
            textAlign: 'right',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'right',
          },
        }),
      },
      {
        title: '汇款类别',
        dataIndex: 'remiTypeName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '认领状态',
        dataIndex: 'claimStatusName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '银行日期',
        dataIndex: 'bankTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD HH:mm'),
      },
      {
        title: '操作',
        dataIndex: 'operate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
            width: 80,
          },
        }),
        render: (_, record) => (
          <Fragment>
            <Link to={`/fmmanage/remitclaim/remitDetail?remitId=${record.remitId}`}>查看</Link>
          </Fragment>
        ),
      },
    ];
    const renderDom = (text, record, item) => {
      if (item.type === 'jumpRouting') {
        return (
          <Fragment>
            <Link to={`/fmmanage/remitclaim/claimDetail?clmRcrdId=${record.clmRcrdId}`}>查看</Link>
            {Number(record.settState) === 1 && (
              <Fragment>
                <Divider type="vertical" />
                <Link to={`/fmmanage/remitclaim/claimCancel?clmRcrdId=${record.clmRcrdId}`}>
                  取消认领
                </Link>
              </Fragment>
            )}
          </Fragment>
        );
      }
      if (item.type === 'date') {
        return moment(text).format('YYYY-MM-DD HH:mm') || '--';
      }
      return text || '--';
    };
    const pageFilterColumns = pageList.columns
      ? pageList.columns.filter(item => Number(item.isShow) === Number(clmType) || !item.isShow)
      : [];
    const pageColumns = pageFilterColumns.map(item => ({
      title: item.label,
      dataIndex: item.prop,
      key: item.prop,
      onCell: () => ({ style: { textAlign: item.location ? item.location : null } }),
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: item.location ? item.location : null,
          width: item.width,
        },
      }),
      render: (text, record) => renderDom(text, record, item),
    }));

    return (
      <PageHeaderWrapper>
        <Card className={styles.tabCard}>
          <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
            <TabPane tab="汇款信息" key="1">
              <Card className={styles.searchCard}>
                <div
                  className={styles.tableListForm}
                  style={{
                    margintop: 4,
                    marginBottom: 16,
                    paddingTop: 16,
                    paddingRight: 16,
                    backgroundColor: '#fafafa',
                  }}
                >
                  {this.renderForm(Number(activeKey))}
                </div>
              </Card>
              <Row style={{ marginBottom: 16 }}>
                {btnList.map(item => (
                  <Authorized authority={item.authority} noMatch={null}>
                    <Button
                      type={
                        item.id === 1 ||
                        item.id === 4 ||
                        item.id === 5 ||
                        (userType === 3 && item.id === 3)
                          ? 'primary'
                          : null
                      }
                      style={{ marginRight: 8 }}
                      key={item.id}
                      onClick={() => this.jumpPage(Number(item.id))}
                    >
                      {item.name}
                    </Button>
                  </Authorized>
                ))}
              </Row>
              <StandardTable
                selectedRows={selectedRows}
                loading={loading}
                data={pageData}
                columns={remitColumns}
                selectedRowKeys={selectedRowKeys}
                rowKey="remitId"
                onSelectRow={this.handleSelectRows}
                onChange={this.handleStandardTableChange}
              />
            </TabPane>
            <TabPane tab="认领记录" key="2">
              <Card className={styles.searchCard}>
                <div
                  className={styles.tableListForm}
                  style={{
                    margintop: 4,
                    marginBottom: 16,
                    paddingTop: 16,
                    paddingRight: 16,
                    backgroundColor: '#fafafa',
                  }}
                >
                  {this.renderForm(Number(activeKey))}
                </div>
              </Card>
              <StandardTable
                selectedRows={selectedRows}
                loading={loading}
                data={pageData}
                columns={pageColumns}
                selectedRowKeys={selectedRowKeys}
                rowKey="clmRcrdId"
                onSelectRow={this.handleSelectRows}
                onChange={this.handleStandardTableChange}
              />
            </TabPane>
          </Tabs>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default RemitClaimList;
